import React from 'react';
import {Input, Button, message, Form, Select, Tabs ,Upload} from 'antd';
import axios from 'axios';
import DepartmentPicker from '../../components/pickCity/departmentPicker'

const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;
const TabPane = Tabs.TabPane;
class addCar extends React.Component{
    constructor(props){
        super(props)
        this.state={
            sassFileList:[],
            ajaxData:{}
        }
    }
    callback=(key)=>{
        console.log(key);
    }

    componentWillMount(){
        this.DD()
    }

    //数据字典
    DD=()=>{
        axios.post('api/commParam/get',{'name':'batch_car'}).then(res=>{
            if(res&&res.code==200){
                console.log(res)
                this.setState(Object.assign(this.state.ajaxData,res.data))
            }
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                console.log('fail');
                return
            }
            console.log('submit', values);
            this.addCarApi(values);
        });
    }

    getFileIdList=(value)=>{
        if(value.length >0){
            this.postUrl = value[0]
        }
    }

    addCarApi=(data)=>{
        axios.post('/api/user/car/model', {...data}).then(res => {
            if(res&&res.code==200){
                console.log('数据成功：',res);
                message.success('操作成功');
                this.props.history.go(-1)
            }
        })
    }

    render(){
        const idConfig = {
            rules: [{required: true, message: '车牌号不能为空!' }],
        };
        const vinConfig = {
            rules: [
                {
                    required: true, message: 'VIN码不能为空!',
                },
                {
                    max:17,message: 'VIN码必须17位!',
                },
                {
                    min:17,message: 'VIN码必须17位!',
                },
                // {
                //     type:'number',message: 'VIN码必须为数字',transform(value) {
                //     return Number(value);
                // }
                // }
            ],
        };
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 2 },
                sm: { span: 2 },
            },
            wrapperCol: {
                xs: { span: 4 },
                sm: { span: 4 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 4,
                },
                sm: {
                    span: 4,
                },
            },
        };
        const props = {
            name: 'file',
            action: axios.defaults.baseURL+'/uploadFile.do?resultFlag=2',
            headers: {
                authorization: 'authorization-text',
            },
            // 在上传开始前做校验
            beforeUpload:(file)=>{
                const isJPG = file.type === 'application/vnd.ms-excel';
                if (!isJPG) {
                    message.error('请上传EXCEL文件!');
                }
                return isJPG
            },
            onChange:(info)=> {
                if (info.file.status !== 'uploading') {
                    if(info.file.type!=='application/vnd.ms-excel'){
                        info.file.status='error';

                    }
                }
                if (info.file.status === 'done') {
                    axios.get(`api/user/car/import?fileName=${info.file.response.data.fileIdList[0]}&type=0`).then(res => {
                        if(res&&res.code==200){
                            message.success(res.data);
                        }
                    });
                } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 失败`);
                }
            },
        };
        return(
            <div >
                <Tabs onChange={this.callback} >
                    <TabPane tab="单个新增" key="1">
                        <div>
                            <form onSubmit={this.handleSubmit}>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('plateNo',idConfig)(
                                        <Input placeholder="车辆号"/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('vin',vinConfig)(
                                        <Input placeholder="VIN"/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('num')(
                                        <Input placeholder="自编码"/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                >
                                    {getFieldDecorator('org')(
                                        <DepartmentPicker placeholder={'部门'}/>
                                    )}
                                </FormItem>
                                <FormItem {...tailFormItemLayout}>
                                    <Button onClick={()=>{this.props.history.go(-1)}} style={{width:"45%",marginRight:'10%'}}>取消</Button>
                                    <Button type="primary" htmlType="submit" style={{width:"45%"}}>保存</Button>
                                </FormItem>
                            </form>
                        </div>
                    </TabPane>
                    <TabPane tab="批量新增" key="2">
                        <div>
                            <div>1、下载模板，将车辆信息填写到模板中</div>
                            <a href={`https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/${this.state.ajaxData.value}`} download={this.state.ajaxData.title}>
                                <Button type="primary" icon="download" style={{margin:"20px 0 20px 60px"}}>下载模板</Button>
                            </a>
                        </div>
                        <div>
                            <div>2、将填写好的模板新增车辆上传</div>
                            <Upload {...props}>
                                <Button  type="primary" icon="upload" style={{margin:"20px 0 20px 60px"}}>上传并新增</Button>
                            </Upload>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}
addCar=createForm()(addCar)
export default addCar
